<template>
  <div class="dashboard-container">
    <div class="Blockage">
      <Blockage :background="bg1" width="280px">
        <template #left>
          <div class="contain-left-num">1648</div>
          <div class="contain-left-people">今日访客数</div>
        </template>
        <template #right>
          <img src="@/assets/logo.png" alt="">
        </template>
      </Blockage>
      <Blockage :background="bg2" width="280px">
        <template #left>
          <div class="contain-left-num">1648</div>
          <div class="contain-left-people">今日访客数</div>
        </template>
        <template #right>
          <img src="@/assets/logo.png" alt="">
        </template>
      </Blockage>
      <Blockage :background="bg3" width="280px">
        <template #left>
          <div class="contain-left-num">1648</div>
          <div class="contain-left-people">今日访客数</div>
        </template>
        <template #right>
          <img src="@/assets/logo.png" alt="">
        </template>
      </Blockage>
      <Blockage :background="bg4" width="280px">
        <template #left>
          <div class="contain-left-num">1648</div>
          <div class="contain-left-people">今日访客数</div>
        </template>
        <template #right>
          <img src="@/assets/logo.png" alt="">
        </template>
      </Blockage>
    </div>
    <div class="dashboard-desc">
      <div ref="box" class="dashboard-desc-echarts" />
      <div class="dashboard-desc-time">
        <div><span class="current-time">当前时间:</span>2023/4/8 13:49:47</div>
        <div class="current-data">
          <h2>128</h2>
          <div class="people-num">在线访客数</div>
          <div class="time-after"><span style="color:#ff7733">10</span>秒之后更新数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data() {
    return {
      bg1: 'linear-gradient(90deg, rgba(253, 109, 164, 1) 0%,rgba(253, 109, 164, 1) 0%,rgba(255, 180, 124, 1) 100%,rgba(255, 180, 124, 1) 100%)',
      bg2: 'linear-gradient(90deg, rgba(141, 116, 239, 1) 0%, rgba(141, 116, 239, 1) 0%, rgba(70, 192, 231, 1) 100%, rgba(70, 192, 231, 1) 100%)',
      bg3: 'linear-gradient(90deg, rgba(35, 146, 150, 1) 0%, rgba(35, 146, 150, 1) 0%, rgba(95, 239, 190, 1) 100%, rgba(95, 239, 190, 1) 100%)',
      bg4: 'linear-gradient(90deg, rgba(142, 86, 250, 1) 0%, rgba(142, 86, 250, 1) 0%, rgba(206, 87, 239, 1) 100%, rgba(206, 87, 239, 1) 100%)'
    }
  },
  computed: {

  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.box)
    // 绘制图表
    myChart.setOption({
      title: {
        text: '访客数和订单量趋势图',
        left: 10,
        top: 20
      },
      legend: {
        bottom: 0,
        left: 'center',
        itemHeight: 10,
        itemWidth: 15,
        icon: 'rect'
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            interval: 0, // 强制文字产生间隔
            rotate: -45, // 文字逆时针旋转45°
            textStyle: {
              // 文字样式
              color: '#666666',
              fontSize: 10,
              fontFamily: 'Microsoft YaHei'
            }
          },
          data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00']
        }
      ],
      yAxis: [
        {
          type: 'value'

        }
      ],
      series: [
        {
          name: 'visitor',
          type: 'line',
          stack: 'Total',
          areaStyle: {
            color: '#b9ddff'
          },
          symbol: 'circle',
          showSymbol: false,
          data: [5, 50, 52, 53, 58, 64, 61, 10, 20, 50, 11]
        },
        {
          name: 'orders',
          type: 'line',
          stack: 'Total',
          // symbol: 'none',
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {
            color: '#bce9c9'
          },
          symbol: 'circle',
          showSymbol: false,
          data: [30, 20, 20, 10, 30, 40, 20, 10, 100, 50, 11]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
// scss 中的&符号可以代表上一级 直接可以 跟-
.dashboard {
  &-container {
    padding: 20px;
    .Blockage{
      margin-top: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1200px;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  &-desc{
    display: flex;
    align-items: center;
    margin-top: 30px;
    &-echarts{
      width: 700px;
      height: 500px;
      background-color: #fff;
  }
  &-time {
      width: 450px;
      height: 500px;
      background-color: #fff;
      margin-left: 50px;
      padding: 10px 20px;
      .current-time{
        font-weight: 700;
      }
      .current-data{
        margin-top: 120px;
        text-align: center;
        h2{
          color: #ff7733;
          font-size: 50px;
        }
        .people-num{
          color: #333333;
          font-weight: 300;
        }
        .time-after{
          color: #333333;
          font-weight: 300;
          margin-top: 50px;
        }
      }
    }
  }
}
</style>
